<template>
	<view>
		<view class="top_box">
			<view class="" style="height: 100rpx;"></view>
			<view class="top_title">
				<image @click="goback" src="@/static/tabBar/left.png" mode="aspectFill"
					style="width: 20rpx;height: 36rpx;margin-left: 30rpx;"></image>
				<view class="top_title_text">行为分</view>
			</view>
			<view class="big_box">
				<view class="banyuan">
				</view>
				<view class="banyuan_sun">
				</view>
				<view class="Progress">
					<CustomProgress :value='numer*1' v-if="integral" />
				</view>
				<view class="banyuan_min">
				</view>
				<view class="big_box_cont">
					<view class="cont_number">{{integral}}</view>
					<view class="" style="font-size: 28rpx;">行为分优秀</view>
				</view>
			</view>
			<view class="bont_box" @click="Text">
				<view class="bont_box_top">
					<view class="bont_box_title">行为分规则</view>
					<image src="@/static/tabBar/right.png" mode="aspectFill" style="width: 14rpx;height: 27rpx;">
					</image>
				</view>
				<view class="bont_box_txt">满分120 基础分100 低于40分则封禁账号</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<view class="title">行为记录</view>
		<scroll-view class="cunt_box" scroll-y="true">
			<view class="item_box" v-for="(item,i) in list">
				<view class="item_bigflx">
					<view class="item_flx">
						<image src="@/static/order/jifen.png" mode="aspectFill"
							style="width: 42rpx;height: 44rpx;margin-right: 20rpx;"></image>
						<view>
							<view class="item_title">{{item.behaviorType}}</view>
							<view class="item_text">行为分<span style="color: #08A3E9;"
									v-if="item.behaviorState==1">+{{item.behaviorNumber}}</span>
								<span style="color: #F2962C;" v-else>-{{item.behaviorNumber}}</span>
							</view>
						</view>
					</view>
					<!-- <view class="item_btn">申诉中</view> -->
					<view class="item_btn1" v-if="item.behaviorState!=1">
						<view class="" v-if="item.representationsStatus==4" @click="Grievance(item)">申诉</view>
						<view class="" v-if="item.representationsStatus==0">审核中</view>
						<view class="" v-if="item.representationsStatus==1">通过</view>
						<view class="" v-if="item.representationsStatus==2">驳回</view>
					</view>
				</view>

				<view class="item_line"></view>
			</view>
		</scroll-view>

		<u-popup :show="show" @close="show=false" :round="10" mode="bottom">
			<view class="pop_box">
				<view class="pop_top">发起申诉</view>
				<view class="pop_box_count">
					<view class="item_flx" style="margin-left: 30rpx;">
						<image @click="goback" src="@/static/order/jifen.png" mode="aspectFill"
							style="width: 42rpx;height: 44rpx;margin-right: 20rpx;"></image>
						<view>
							<view class="item_title">{{moodmsg.behaviorType}}</view>
							<view class="item_text">行为分<span style="color: #F2962C;">-{{moodmsg.behaviorNumber}}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="gbi_box1">
					<view class="gbi_box_fontw">申诉内容</view>
					<view class="textarea_box">
						<textarea class="textarea" v-model="formData.message" placeholder="请输入你的意见反馈内容" maxlength="100"
							style="font-size: 24rpx;">
								</textarea>
						<view class="num">
							<view class="">
								{{ formData.message.length }}/100
							</view>

						</view>
					</view>
					<view class="gbi_box1_image" style="display: flex;align-items: center;">
						<view class="gbi_box1_image_xia" @click="popshow=true" v-if="formData.picUrls.length<3">
							<view>
								<image src="../../../static/order/xiangji.png" mode="aspectFill"
									style="width: 51rpx;height: 46rpx;"></image>
								<view style="font-size: 22rpx;color: #999999;">照片/视频</view>
							</view>
						</view>
						<view class="felx_box">
							<view style="margin-left: 20rpx;position: relative;" v-for="(item,i) in formData.picUrls">
								<view style="width: 100%;height: 100%;" v-if="">
									<image v-if="item.labe==0" :src="item.url" mode="aspectFill"
										style="width: 136rpx;height: 136rpx;border-radius: 10rpx;"></image>
									<video v-else :src="item.url" :show-fullscreen-btn="true" :controls="false"
										:autoplay="true"
										style="width: 136rpx;height: 136rpx;border-radius: 10rpx;"></video>
									<image @click.stop="sandia(i)" src="@/static/tabBar/sanchu.png"
										mode="aspectFill" class="sanimage"></image>
								</view>
							</view>
						</view>
					</view>
					<u-action-sheet class="actionSheet" round="20rpx" @select="selectClick" cancelText="取消"
						:actions="headList" :closeOnClickOverlay="true" :closeOnClickAction="true" :show="popshow"
						@close="popshow=false"></u-action-sheet>
				</view>
				<view class="saxasd" @click="qudingti">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CustomProgress from '@/components/CustomProgress'
	import utils from '@/utils/file.js'
	export default {
		components: {
			CustomProgress
		},
		data() {
			return {
				show: false,
				popshow: false,
				formData: {
					message: '',
					picUrls: [],
				},
				list: [],
				behaviorId: '',
				integral: 0,
				headList: [{
						name: '照片',
						fontSize: "30rpx",
						color: '#000',
					},
					{
						name: '视频',
						fontSize: "30rpx",
						color: '#000',

					},
				],
				moodmsg: {}
			}
		},
		onLoad() {
			this.cread()
		},
		methods: {
			goback(){
				uni.navigateBack()
			},
			Text() {
				uni.navigateTo({
					url: '/pages/my/jifen/Rules/Rules'
				})
			},
			sandia(e) {
				this.formData.picUrls.forEach((item, i) => {
					if (e == i) {
						this.formData.picUrls.splice(i, 1)
					}
				})
			},
			async cread() {
				let res = await this.$http.users.behaviorList({
					type: 0
				})
				this.integral = res.data.data.driverInfo.behaviorScore
				 this.numer = this.integral*1/120*100
				this.list = res.data.data.behaviorRecords
			},
			Grievance(e) {
				this.show = true
				this.behaviorId = e.behaviorId
				this.moodmsg = e
			},
			selectClick(index) {
				if (index.name == "照片") {
					this.uploadImg()
				}
				if (index.name == "视频") {
					this.uploadVideo()
				}
			},
			uploadImg(index) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						let obj = {
							file: tempFilePaths[0]
						}
						utils.AuploadFile(obj).then(res1 => {
							if (res1.code == 200) {
								that.formData.picUrls.push({
									url: res1.data.url,
									labe: 0
								})

							}
						})

					}
				})
			},
			uploadVideo() {
				let that = this
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					compressed: true,
					success: (res) => {
						//console.log(res)
						const tempFilePaths = res.tempFilePath //图片临时数组
						let obj = {
							file: tempFilePaths
						}
						utils.AuploadFile(obj).then(res1 => {

							if (res1.code == 200) {
								that.formData.picUrls.push({
									url: res1.data.url,
									labe: 1,
								})
								that.videoimg()
							}
						})

					}
				})
			},
			videoimg() {
				let that = this
				that.formData.picUrls.forEach((item, i) => {
					if (item.labe == 1) {
						var video = document.createElement("VIDEO")
						video.setAttribute('autoplay', true)
						video.setAttribute('muted', true)
						video.innerHTML = '<source src=' + item.url + ' type="audio/mp4">'
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						//console.log(video)
						// video注册canplay自动播放事件
						video.addEventListener('canplay', function() {
							var anw = document.createAttribute("width");
							anw.nodeValue = 500;
							var anh = document.createAttribute("height");
							anh.nodeValue = 300;
							canvas.setAttributeNode(anw);
							canvas.setAttributeNode(anh);
							ctx.drawImage(video, 0, 0, 500, 300);
							var base64 = canvas.toDataURL('image/png')
							video.pause()
							that.formData.picUrls.video_image = base64
							//console.log(that.formData.picUrls)
						}, false)


					}

				})

			},

			async qudingti() {
				let data = []
				let that = this
				for (let i = 0; i < this.formData.picUrls.length; i++) {
					data.push(this.formData.picUrls[i].url)
				}
				data = Array.from(new Set(data))
				data = data.join(",")
				let mood = {
					statementReason: this.formData.message,
					statementUrls: data,
					behaviorId: this.behaviorId
				}
				let res = await this.$http.users.submitBehaviorStatement(mood)
				if (res.data.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						success() {
							that.cread()
							that.popshow = false
							that.show = false
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #eee;
	}

	.top_title {
		display: flex;
		justify-content: space-between;
		width: 60%;
		position: absolute;
		z-index: 9999;
	}

	.top_title_text {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}

	.pop_box_count {
		width: 690rpx;
		margin-left: 31rpx;
		height: 150rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		margin-top: 35rpx;
		border-radius: 10rpx;
	}

	.pop_box {
		height: 80vh;
		background-color: #eee;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item_btn1 {
		width: 88rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border: 1rpx solid #00A0E9;
		border-radius: 22rpx;
		font-size: 24rpx;
		color: #00A0E9;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.item_line {
		width: 100%;
		border-bottom: 1rpx solid #eee;
		margin-top: 20rpx;
	}

	.pop_top {
		background-color: #fff;
		height: 130rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		line-height: 130rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.item_box {
		padding: 30rpx;
	}

	.item_bigflx {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_btn {
		font-size: 24rpx;
		color: #08A3E9;

	}

	.item_text {
		font-size: 24rpx;
		color: #999999;
	}

	.item_title {
		font-size: 28rpx;
		font-weight: 600;
	}

	.item_flx {
		display: flex;
		align-items: center;
	}

	.title {
		margin-left: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.cunt_box {
		width: 690rpx;
		height: 710rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-left: 32rpx;
		margin-top: 29rpx;
	}

	.bont_box_txt {
		font-size: 24rpx;
		color: #999999;
		margin-left: 30rpx;
		margin-top: 23rpx;
	}

	.bont_box_top {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		padding-left: 30rpx;
	}

	.bont_box_title {
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 20rpx;
	}

	.top_box {
		width: 100%;
		height: 750rpx;
		background-color: #019FE8;
		position: relative;
	}

	.bont_box {
		width: 690rpx;
		height: 154rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		bottom: -8%;
		left: 4%;
	}

	.cont_number {
		font-weight: 600;
	}

	.big_box_cont {
		color: #fff;
		position: absolute;
		bottom: 20%;
		font-size: 100rpx;
		width: 750rpx;
		text-align: center;
	}

	.banyuan {
		width: 700rpx;
		height: 400rpx;
		border-top-left-radius: 400rpx;
		border-top-right-radius: 400rpx;
		border: #fff 1rpx solid;
		border-bottom: none;
		opacity: 0.3;
		position: absolute;
		left: 3%;
		bottom: 20%;
	}



	.banyuan_sun {
		width: 600rpx;
		height: 350rpx;
		border-top-left-radius: 350rpx;
		border-top-right-radius: 350rpx;
		border: #fff 1rpx solid;
		border-bottom: none;
		opacity: 0.5;
		position: absolute;
		left: 10%;
		bottom: 20%;
	}

	.Progress {
		position: absolute;
		width: 600rpx;
		height: 300rpx;
		bottom: 3%;
		left: 10%;
	}

	.banyuan_min {
		width: 430rpx;
		height: 230rpx;
		border-top-left-radius: 230rpx;
		border-top-right-radius: 230rpx;
		border: #fff 1rpx dashed;
		border-bottom: none;
		opacity: 0.5;
		position: absolute;
		left: 21%;
		bottom: 20%;

	}

	.textarea_box {
		padding: 20rpx;
		background-color: #F7F9FB;
		width: 600rpx;
		height: 240rpx;
		margin-left: 40rpx;
		margin-top: 32rpx;
		border-radius: 10rpx;



	}

		.textarea {
			font-size: 28rpx;
			line-height: 45rpx;
			width: 590rpx;
			height: 240rpx;
		}
	.saxasd {
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #00A0E9;
		border-radius: 10rpx;
		color: #fff;
		margin-left: 0rpx;
		margin-top: 15rpx;
		margin-left: 31rpx;

	}

	.sanimage {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: -2%;
		right: -2%;
		z-index: 9;
	}

	.felx_box {
		display: flex;
		margin-top: 30rpx;
		align-items: center;
	}

	.gbi_box1_image_xia {
		width: 136rpx;
		height: 136rpx;
		background-color: #F7F9FB;
		margin-left: 40rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fuwenb {
		width: 610rpx;
		height: 240rpx;
		background-color: #F7F9FB;
		border-radius: 10rpx;
		margin-left: 40rpx;
		font-size: 24rpx;
		padding-top: 23rpx;
		padding-left: 25rpx;
		margin-top: 32rpx;
	}

	.gbi_box_item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 38rpx;
		padding-right: 38rpx;
	}

	.gbi_box_item_sun {
		width: 188rpx;
		height: 72rpx;
		border: 1rpx solid #00A0E9;
		border-radius: 8rpx;
		margin-top: 23rpx;
		text-align: center;
		line-height: 72rpx;
		background-color: #F1F9FF;
		color: #00A0E9;
		font-size: 26rpx;
		font-weight: 100;
	}

	.gbi_box_item_sun1 {
		width: 188rpx;
		height: 72rpx;
		border: 1rpx solid #E7E7E8;
		border-radius: 8rpx;
		margin-top: 23rpx;
		text-align: center;
		line-height: 72rpx;


		font-size: 26rpx;
		font-weight: 100;
	}

	.gbi_box {
		width: 710rpx;
		height: 338rpx;
		background-color: #fff;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}

	.gbi_box1 {
		width: 690rpx;
		background-color: #fff;
		margin-left: 31rpx;
		border-radius: 10rpx;
		margin-top: 23rpx;
		padding-bottom: 50rpx;
	}

	.gbi_box_fontw {
		font-weight: 600;
		font-size: 32rpx;
		padding-top: 50rpx;
		padding-left: 38rpx;
		padding-right: 38rpx;
	}

	.num {
		text-align: right;
		color: gray;
		margin-top: -100rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		color: #999999;
	}
</style>